<template>
  <div class="category">
    <el-row>
      <el-col v-for="item in cate" :key="item.icon" :span="6">
        <svg class="icon" aria-hidden="true">
          <use :xlink:href="'#' + item.icon"></use>
        </svg>
        <p>{{ item.name }}</p>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
let cate = reactive([
  {
    name: '女装',
    icon: 'eld-yiqun'
  },
  {
    name: '彩妆',
    icon: 'eld-caizhuang'
  },
  {
    name: '礼品',
    icon: 'eld-lipin1'
  },
  {
    name: '出行',
    icon: 'eld-hanglixiang'
  },
  {
    name: '数码',
    icon: 'eld-xiangji'
  },
  {
    name: '家具',
    icon: 'eld-jiaju'
  },
  {
    name: '奢品',
    icon: 'eld-shoubiao'
  },
  {
    name: '体育',
    icon: 'eld-tiyuyongpin'
  }
])
</script>

<style lang='less' scoped>
.category {
  background-color: white;
  padding: 8px 0px;
  margin-top: 10px;
  border-radius: 8px;
  .el-row {
    text-align: center;
    .el-col {
      padding: 2.5px 0px;
      .icon {
        width: 2.6em;
        height: 2.6em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
      }
      p {
        font-size: 13px;
      }
    }
  }
}
</style>
